<!--
 * @Date: 2023-11-13 15:46:52
 * @LastEditTime: 2024-03-09 14:08:27
 * @Description: content
-->
<template>
	<view class="content">
		<uni-nav-bar title="闯关赏" color="#fff" backgroundColor="transparent" :border="false" :statusBar="true" :fixed="true"
			@clickLeft="$c.back()">
			<view class="uni-nav-bar-l-icon" slot="left">
				<view class="uni-nav-bar-l-icon-left icon">
					<image :src="$img('/static/img2/cc20.png')" lazy-load></image>
				</view>
			</view>
		</uni-nav-bar>

		<view class="hd-banner">
			<image :src="pageData && pageData.goods.imgurl" lazy-load></image>

			<view v-if="bossCardData && bossCardData.king_user" class="boss-card c_bg" :style="{
          top: `calc(${$sys().statusBarHeight}px + 88rpx + 30rpx)`,
          backgroundImage: `url(${$img('/static/img2/cc101.png')})`
        }" @click="open('bossPop')">
				<view class="boss-ava">
					<image :src="bossCardData.king_user.headimg" lazy-load></image>
				</view>

				<view class="boss-name hang1">
					{{ bossCardData.king_user.nickname }}
				</view>

				<view class="boss-fa">占领{{ bossCardData.king_user.z_nums }}发</view>

				<view class="boss-th">
					<view>第{{ bossCardData.king_user.count }}发</view>

					<view>晋升领主</view>
				</view>
			</view>
		</view>

		<!-- :style="{
        backgroundImage: `url(${$img(
          pageData && pageData.goods.rage_is == 1
            ? '/static/img2/cc94.png'
            : '/static/img2/cc79.png'
        )})`
      }" -->
		<view class="banner-up c_bg" :class="{
        noRe: pageData && pageData.goods.rage_is != 1
      }" :style="{
        backgroundImage: `url(${$img(
          false ? '/static/img2/cc94.png' : '/static/img2/cc79.png'
        )})`
      }">
			<view class="box-title c_bg" :style="{
          backgroundImage: `url(${$img('/static/img2/cc49.png')})`
        }">
				<view class="box-title-inner">
					<uni-notice-bar :style="{
              width: `100%`
            }" :speed="30" background-color="transparent" color="#000" scrollable single
						:text="(pageData && pageData.goods.title) || ''"></uni-notice-bar>
				</view>
			</view>

			<view v-if="pageData" class="rule-price">
				<view class="rule" @click="$refs.rulePop.getRule(22, '购买说明')">
					<image :src="$img('/static/img2/cc47.png')" lazy-load></image>
				</view>

				<view class="price c_bg" :style="{
            backgroundImage: `url(${$img('/static/img2/cc48.png')})`
          }">
					¥
					<text>{{ pageData.goods.price * 1 }}</text>
					/抽
				</view>
			</view>

			<!-- <view v-if="pageData && pageData.goods.rage_is == 1" class="rd-box">
        <view class="rd-l">
          <image :src="$img('/static/img2/cc90.png')" lazy-load></image>
        </view>

        <view class="rd-c"></view>

        <view class="rd-r">
          <view class="nu-rate">
            怒气值:{{ (pageData && pageData.goods.user_rage) || '0' }}
          </view>

          <view class="nu-pro">
            <cmd-progress
              :percent="(pageData && pageData.goods.user_rage_schedule) || 0"
              :show-info="false"
              stroke-color="#E40D1D"
              stroke-shape="square"
              :strokeWidth="9"
            ></cmd-progress>
          </view>

          <view class="nu-tip">
            {{ (pageData && pageData.goods.item_card_info) || '0' }}
          </view>
        </view>
      </view> -->
		</view>

		<view class="tab">
			<view class="tab-item common_bg" v-for="(item, i) in tabList" :key="i" :class="{
          act: tabCur == i
        }" :style="{
          backgroundImage: `url(${$img('/static/img2/cc53.png')})`
        }" @click="tabChange(i)">
				<text>{{ item.title }}</text>
			</view>
		</view>

		<view v-if="tabCur == 1 && pageData" class="list">
			<view class="list-item common_bg" v-for="(item, i) in pageData.shang" :key="i">
				<view class="list-title common_bg" :style="{
            backgroundImage: `url(${item.imgurl})`
          }">
					{{ item.shang_title }}
					<text>{{ item.gailv }}(此概率为当前赏类别出赏概率)</text>
				</view>

				<scroll-view scroll-x>
					<view class="goods-list">
						<view class="goods-item" v-for="(a, b) in item.goods_list" :key="b" @click="previewDetail(item, a)">
							<view class="pic c_bg" :style="{
                  backgroundImage: `url(${$img('/static/img2/cc89.png')})`
                }">
								<image :src="a.imgurl" lazy-load></image>

								<image v-if="a.prize_type==2" :src="$img('/static/img3/ta_9.png')"
									style="width: 104rpx;height: 40rpx;right: 0;top: 0;" class="absolute">
								</image>
								<image v-else-if="a.prize_type==3" :src="$img('/static/img3/ta_10.png')"
									style="width: 104rpx;height: 40rpx;right: 0;top: 0;" class="absolute">
								</image>

								<!-- <view v-if="a.goods_type == 2" class="yu-tag">预售</view> -->
							</view>

							<view class="title hang1">
								{{ a.title }}
							</view>

							<view class="price">售价:{{ a.price }}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<template v-if="tabCur == 2">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="getLog" :down="downOption"
				:up="upOption">
				<scroll-view class="sub-tab" scroll-x>
					<view class="sub-tab-item common_bg" v-for="(item, i) in subTab" :key="i" :class="{
              act: subTabCur == i
            }" @click="subTabChange(i)">
						{{ item.shang_title }}
					</view>
				</scroll-view>

				<view class="log-list">
					<view class="log-item" v-for="(a, b) in logList" :key="b">
						<view v-if="a.luck_no" class="log-num">第{{ a.luck_no }}发</view>

						<view class="avatar">
							<image :src="a.headimg" lazy-load></image>
						</view>

						<view class="info">
							<view class="name hang1">
								{{ a.nickname }}
							</view>

							<view class="time">{{ a.addtime }}</view>
						</view>

						<view class="prize">
							<view class="pic">
								<image :src="a.imgurl" lazy-load></image>
							</view>

							<view class="title hang1">
								{{ a.goodslist_title }}
							</view>

							<view class="num">×1</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</template>

		<!-- <view class="fixed-btns">
      <view class="btn" @click="doRefresh">
        <image :src="$img('/static/img/refresh.png')" lazy-load></image>
      </view>

      <view class="btn relative">
        <button class="hide" open-type="share"></button>

        <image :src="$img('/static/img/share.png')" lazy-load></image>
      </view>

      <view class="btn" @click="toBag">
        <image :src="$img('/static/img/bag.png')" lazy-load></image>
      </view>
    </view> -->

		<view v-if="pageData" class="bt-fixed">
			<view class="bt-btn common_bg" :style="{
          backgroundImage: `url(${$img('/static/img3/ta_12.png')})`
        }" @click="confirmSubmit([0, 1])"></view>
		</view>

		<uni-popup ref="resPop" type="center" mask-background-color="rgba(0,0,0,0.8)" @change="resPopChange">
			<view class="res-pop">
				<view class="res-pop-hd">
					<image :src="$img('/static/img2/cc66.png')" lazy-load></image>
				</view>

				<scroll-view class="res-pop-bd" scroll-y>
					<view class="res-list">
						<view class="res-item c_bg" v-for="(item, i) in prizeData.orderlist" :key="i" :style="{
                backgroundImage: `url(${$img('/static/img2/cc67.png')})`
              }">
							<view class="type-num">
								<view class="type-tag">{{ item.shang_title }}</view>

								<view class="num">×{{ 1 }}</view>
							</view>

							<view class="pic c_bg" :style="{
                  backgroundImage: `url(${$img('/static/img2/cc68.png')})`
                }">
								<image :src="item.goodslist_imgurl" lazy-load></image>

								<!-- <view class="check">
                  <image
                    v-if="item.isChoose"
                    :src="$img('/static/img/check_act.png')"
                    lazy-load
                  ></image>

                  <image
                    v-else
                    :src="$img('/static/img/check.png')"
                    lazy-load
                  ></image>
                </view> -->
							</view>

							<view class="title hang1">
								{{ item.goodslist_title }}
							</view>

							<view v-if="showChange == 1" class="exchange">
								{{
                  item.goodslist_money * 1 > 0
                    ? `可兑换:${item.goodslist_money}`
                    : `不可兑换`
                }}
							</view>
						</view>
					</view>
				</scroll-view>

				<view class="res-pop-ft">
					<view class="btn-list">
						<view class="ft-btn confirm common_bg" :style="{
                backgroundImage: `url(${$img('/static/img2/cc69.png')})`
              }" @click="toBag">
							<!-- <text>去盒柜</text> -->
						</view>

						<view class="ft-btn common_bg" :style="{
                backgroundImage: `url(${$img('/static/img2/cc70.png')})`
              }" @click="close('resPop')">
							<!-- 确定 -->
						</view>
					</view>

					<!-- <view
            class="r-draw common_bg"
            :style="{
              backgroundImage: `url(${$img('/static/img2/cc91.png')})`
            }"
            @click="$c.noDouble(doReDraw)"
          >
            重抽×{{ prizeData && prizeData.data.length }}(余{{
              prizeData.item_card_count
            }})
          </view> -->
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="playPop" type="center">
			<view v-if="bossCardData" class="play-pop common_bg" :style="{
          backgroundImage: `url(${$img('/static/img/3_inf_boss_pop.png')})`
        }">
				<view class="play-pop-hd">
					<image :src="$img('/static/img/3_inf_lzwf.png')" lazy-load></image>
				</view>

				<view @click="close('playPop')" class="close">
					<image :src="$img('/static/img/close2.png')" lazy-load></image>
				</view>

				<swiper class="p-swiper">
					<swiper-item class="p-item" v-for="(item, i) in bossCardData.ling_goods_list" :key="i">
						<view class="play-pic">
							<image :src="item.imgurl" lazy-load></image>

							<view class="play-type">
								<text>{{ item.shang_info.title }}</text>
							</view>
						</view>

						<view class="play-ling">
							<image :src="$img('/static/img/3_inf_lzlp.png')" lazy-load></image>
						</view>

						<view class="play-name hang1">
							{{ item.title }}
						</view>
					</swiper-item>
				</swiper>

				<view class="line"></view>

				<view class="rule-title">
					<image :src="$img('/static/img/3_inf_boss_wfgz.png')" lazy-load></image>
				</view>

				<scroll-view class="rule-text" scroll-y>
					<view v-html="playRuleData"></view>
				</scroll-view>
			</view>
		</uni-popup>

		<uni-popup ref="dPop" type="center">
			<view v-if="previewData" class="d-pop common_bg" :style="{
          backgroundImage: `url(${$img('/static/img2/cc62.png')})`
        }">
				<view class="pic">
					<image :src="previewData.imgurl" lazy-load></image>
				</view>

				<view class="title">
					<text class="hang1">
						{{ previewData.title }}
					</text>
				</view>

				<view class="d-list">
					<view class="d-item">
						{{ previewData.shang_title }} {{ previewData.pro }}
					</view>

					<view class="d-item">产品类型:{{ optData.type_text }}</view>
				</view>

				<view class="close icon" @click="close('dPop')">
					<image :src="$img('/static/img2/cc63.png')" lazy-load></image>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="buyPop" type="bottom">
			<view v-if="orderData" class="buy-pop c_bg" :style="{
          backgroundImage: `url(${$img('/static/img2/cc71.png')})`
        }">
				<view class="buy-pop-hd">
					确认订单

					<view class="close icon" @click="close('buyPop')">
						<image :src="$img('/static/img2/cc75.png')" lazy-load></image>
					</view>
				</view>

				<view class="hd-line"></view>

				<view class="buy-card">
					<view class="buy-info">
						<view class="pic">
							<image :src="orderData.goods.imgurl" lazy-load></image>
						</view>

						<view class="info-r">
							<view class="title hang1">
								{{ orderData.goods.title }}
							</view>

							<view class="type">类型:闯关</view>

							<template v-if="
                  orderData.goods.is_shou_zhe == 1 &&
                  orderData.goods.shou_zhe_price * 1 > 0
                ">
								<view class="price-num">
									<view class="price">
										¥
										<text>{{ orderData.goods.shou_zhe_price }}</text>
									</view>

									<view class="num">×{{ 1 }}</view>
								</view>

								<view v-if="orderData.goods.prize_num > 1" class="price-num">
									<view class="price">
										¥
										<text>{{ orderData.goods.price }}</text>
									</view>

									<view class="num">
										×{{ orderData.goods.prize_num * 1 - 1 }}
									</view>
								</view>
							</template>

							<view v-else class="price-num">
								<view class="price">
									¥
									<text>{{ orderData.goods.price }}</text>
								</view>

								<view class="num">×{{ orderData.goods.prize_num }}</view>
							</view>
						</view>
					</view>

					<view class="line"></view>

					<view class="card-row" @click="toCoupon">
						<view class="title">优惠券</view>

						<view class="row-r">
							<text v-if="couponData && orderData.coupon_price > 0" @click.stop="couponData = ''">
								{{ '取消使用' }}
							</text>

							{{
                couponData && orderData.coupon_price > 0
                  ? `-${couponData.price}`
                  : '未选择'
              }}

							<view class="icon">
								<image :src="$img('/static/img2/cc72.png')" lazy-load></image>
							</view>
						</view>
					</view>

				</view>

				<view class="pay-card">
					<view class="pay-title">请选择支付方式</view>

					<view class="pay-type" @click="changePay('useMoney')">
						<view class="icon">
							<image :src="$img('/static/img2/cc74.png')" lazy-load></image>
						</view>

						<view class="title">
							使用余额抵扣¥
							{{ orderData.use_money }} (剩余:{{ orderData.money }})
						</view>

						<view class="icon">
							<image v-if="useMoney" :src="$img('/static/img2/cc44.png')" lazy-load></image>

							<image v-else :src="$img('/static/img2/cc45.png')" lazy-load></image>
						</view>
					</view>
				</view>

				<view class="agree" @click="isAgree = !isAgree">
					<view class="icon">
						<image v-if="isAgree" :src="$img('/static/img2/cc44.png')" lazy-load></image>

						<image v-else :src="$img('/static/img2/cc44.png')" lazy-load></image>
					</view>

					我已满18岁,阅读并同意

					<text @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">
						《用户协议》
					</text>

					<text @click.stop="$c.to({ url: '/pages/guize/guize?type=5' })">
						《隐私政策》
					</text>
				</view>

				<view class="rule">
					<scroll-view class="rule-inner" scroll-y>
						<view v-html="sendRuleData"></view>
					</scroll-view>
				</view>

				<view class="pay-btn c_bg" :style="{
            backgroundImage: `url(${$img('/static/img2/cc78.png')})`
          }" @click="$c.noDouble(confirmSubmit, [1, buyNum])">
					确认支付
					{{
            pageData.goods.type == 5
              ? ` ${orderData.price}积分`
              : ` ¥${orderData.price}`
          }}
				</view>
			</view>
		</uni-popup>



		<view v-if="aniShow" class="ani-pop">
			<image :src="aniSrc" lazy-load></image>
		</view>

		<uni-popup ref="tipRef" type="center" maskBackgroundColor="rgba(0,0,0,0.9)" :isMaskClick="false">
			<view class="f-d-c f-c-c">
				<view class="mask_tip" :style="{background:`url(${$img('/static/img3/ta_13.png')}) no-repeat 0 0 / 100% 100%`}">
					<view class="header f-c-c">温馨提示</view>
					<view class="title f-c-c mt60" v-if="prizeData.prize_type !== 4">
						{{prizeData.prize_type == 3?"很遗憾":'恭喜'}}您抽到了
						<text>【{{prizeData.prize_type == 3?"挑战失败":'挑战成功'}}】</text>
						商品！
					</view>
					<view class="title f-c-c mt60" v-else>恭喜您已完成全部闯关</view>

					<view class="content mt20 f-c-c">
						{{prizeData.prize_type == 3?"点击确定回归挑战上一层":'点击确定继续挑战下一层'}}
					</view>
				</view>
				<image :src="$img('/static/img3/ta_14.png')" class="mask_btn mt60" style="width: 192rpx;height: 74rpx;"
					@click="confirmCheckpoint" />
			</view>
		</uni-popup>

		<buy-notice ref="buyNotice" @confirm="$c.noDouble(confirmSubmit, [1, buyNum, true])"></buy-notice>

		<rule-pop ref="rulePop"></rule-pop>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				optData: '',
				buyNum: 0,
				useMoney: true,
				useIntegral: true,
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					auto: false
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					auto: false,
					page: {
						size: 15 // 每页数据的数量,默认10
					}
				},
				tabList: {
					1: {
						title: '商品预览'
					},
					2: {
						title: '中赏记录'
					}
				},
				tabCur: 1,
				swCur: 0,
				autoplay: false,
				subTab: [],
				subTabCur: 0,
				bossTab: [{
						id: 1,
						title: '挑战人数'
					},
					{
						id: 2,
						title: '领主记录'
					}
					// {
					//   id: 3,
					//   title: '领主收益'
					// }
				],
				bossTabCur: 0,
				pageData: '',
				previewData: '',
				orderData: '',
				prizeData: {
					orderlist: []
				},
				sendRuleData: '',
				couponData: '',
				isAgree: true,
				aniShow: false,
				bossCardData: '',
				bossList: [],
				bossTotal: 0,
				playRuleData: '',
				logList: [],
				showChange: 0
			}
		},

		computed: {
			reChooseNum() {
				const arr = this.prizeData.orderlist.filter(item => item.isChoose)
				return arr.length
			}
		},

		onShareAppMessage() {
			return {
				title: `简单模玩${this.pageData.goods.title}系列`,
				imageUrl: this.pageData.goods.imgurl_detail,
				path: '/pages/shouye/detail_wuxian' +
					this.$c.qs({
						goods_id: this.pageData.goods.id,
						goods_num: this.pageData.goods.num,
						pid: uni.getStorageSync('userinfo').ID
					})
			}
		},

		onLoad(options) {
			this.optData = options

			uni.$on('chooseCoupon', data => {
				// console.log('data', data)

				this.couponData = data
				this.confirmSubmit([0, this.buyNum])
			})

			// uni.getImageInfo({
			//   src: this.$img('/static/img/animation.png'),
			//   success: ({ path }) => {
			//     this.aniSrc = path
			//   }
			// })

			this.$c.getRule(10).then(res => {
				if (res.status == 1) {
					this.sendRuleData = res.data
				}
			})
		},

		onShow() {
			this.autoplay = true
			this.getUserInfo()
		},

		onReady() {
			this.tabChange(this.tabCur)

			// this.open('bossPop')
			// this.open('playPop')
		},

		onHide() {
			this.autoplay = false
		},

		onUnload() {
			uni.$off('chooseCoupon')
		},

		methods: {
			getUserInfo() {
				if (!uni.getStorageSync('token')) {
					return
				}

				let that = this
				that.req({
					url: 'user',
					success(res) {
						if (res.status == 1) {
							uni.setStorageSync('userinfo', res.data.userinfo)

							/* 判断兑换是否展示 */
							if (res.data.userinfo.dh_is_open == 1) {
								that.showChange = 1
							}
						}
					}
				})
			},

			// reChoosePrize(item) {
			//   this.$set(item, 'isChoose', !item.isChoose)
			// },

			bossTabChange(i) {
				this.bossTabCur = i
				this.bossList = []

				this.$refs.bossScroll.mescroll.resetUpScroll()
				this.$refs.bossScroll.mescroll.scrollTo(0, 0)
			},

			previewDetail(item, a) {
				const obj = {
					imgurl: a.imgurl,
					title: a.title,
					shang_title: item.shang_title,
					pro: item.pro
				}

				console.log(obj)
				this.previewData = obj

				this.open('dPop')
			},

			doReDraw() {
				if (this.orderData.item_card_count <= 0) {
					this.$c.toast({
						title: '重抽卡不足'
					})

					return
				}

				const arr = this.prizeData.data.map(item => item.id)

				if (arr.length <= 0) {
					this.$c.toast({
						title: '请选择重抽赏品'
					})
					return
				}

				this.req({
					url: 'item_card_chou',
					data: {
						goods_id: this.pageData.goods.id,
						order_list_ids: arr.join(',')
					},
					success: res => {
						if (res.status == 1) {
							this.close('resPop')

							this.doRefresh()
							this.getPrize(res.data.order_id)
						}
					}
				})
			},

			swChange(e) {
				this.swCur = e.detail.current
			},

			toggleCollect() {
				this.req({
					url: 'addCollect',
					data: {
						goods_id: this.pageData.goods.id
					},
					success: res => {
						if (res.status == 1) {
							this.doRefresh()
						}
					}
				})
			},

			toBag() {
				this.close('resPop')

				this.$c.to({
					type: 3,
					url: '/pages/sangdai/sangdai'
				})
			},

			toCoupon() {
				this.$c.to({
					url: '/pages/user/coupon',
					query: {
						type: 2,
						state: this.pageData.goods.type,
						total_price: this.orderData.order_total
					}
				})
			},

			getPrize(order_id) {
				if (!order_id) return

				setTimeout(() => {
					this.req({
						url: 'climb_prize_list',
						data: {
							order_id
						},
						success: res => {
							if (res.status == 1) {
								res.data.orderlist.map(item => {
									item.isChoose = false
								})

								this.prizeData = res.data

								if (res.data.orderlist.length <= 0) {
									this.getPrize(order_id)
									return
								}

								// this.aniShow = true
								// setTimeout(() => {
								//   this.aniShow = false
								// if (uni.getStorageSync('_can_play_music') == 1) {
								// 	this.bgmCtx.openBgm.stop()
								// 	this.bgmCtx.openBgm.play()
								// }
								this.open('resPop')
								// }, 1300)
							}
						}
					})
				}, 500)
			},

			changePay(e) {
				this[e] = !this[e]

				this.confirmSubmit([0, this.buyNum])
			},

			confirmSubmit([type, num, fromNotice = false]) {
				let url = 'climb_money_info'

				if (type == 1) {
					url = 'order_money_add'

					if (!uni.getStorageSync('_agree_buy_notice') && !fromNotice) {
						this.$refs.buyNotice.getRule(6)
						return
					}
				}

				this.buyNum = num
				this.req({
					url,
					data: {
						goods_id: this.optData.id,
						num: this.optData.num,
						prize_num: this.buyNum,
						use_money_is: this.useMoney ? 1 : 2,
						// use_integral_is: this.useIntegral ? 1 : 2,
						coupon_id: (this.couponData && this.couponData.id) || ''
						// ad_id: uni.getStorageSync('_ad_id')
					},
					success: async res => {
						if (res.status == 1) {
							if (type == 0) {
								if (res.data.coupon_id) {
									this.couponData = {
										id: res.data.coupon_id,
										price: res.data.coupon_price
									}
								}

								this.orderData = res.data

								this.open('buyPop')
							}

							if (type == 1) {
								this.close('buyPop')

								if (res.data.status == 1) {
									const status = await this.$c.wxMpPay({
										data: res.data.res
									})

									if (status == 'success') {
										this.getPrize(res.data.order_id)
										this.doRefresh()
									}
								} else {
									this.$c.toast({
										title: res.msg,
										duration: 500,
										success: () => {
											this.getPrize(res.data.order_id)
											this.doRefresh()
										}
									})
								}
							}
						}
					}
				})
			},

			resPopChange(e) {
				console.log(this.prizeData);
				if (!e.show && this.prizeData.prize_type > 1) this.open('tipRef')
			},

			confirmCheckpoint() {
				this.optData.num = this.prizeData.num
				this.doRefresh()
				this.$refs.tipRef.close()
			},

			doRefresh() {
				this.getData()

				if (this.tabCur == 2) {
					this.tabChange(this.tabCur)
				}
			},

			subTabChange(i) {
				this.subTabCur = i
				this.logList = []

				this.$nextTick(() => {
					setTimeout(() => {
						this.mescroll.resetUpScroll()
					}, 100)
				})
			},

			tabChange(i) {
				this.tabCur = i

				switch (Number(i)) {
					case 1:
						this.getData()
						break
					case 2:
						this.subTabChange(this.subTabCur)
						break
				}
			},

			getBossData({
				num,
				init
			}) {
				this.req({
					url: 'ling_zhu_king',
					data: {
						page: num,
						goods_id: this.optData.goods_id,
						type: this.bossTab[this.bossTabCur].id
					},
					Loading: true,
					success: res => {
						if (res.status == 1) {
							this.bossCardData = res.data

							if (init) {
								return
							}

							if (num == 1) {
								this.bossList = []
							}

							this.bossList = this.bossList.concat(res.data.list.data)
							this.$refs.bossScroll.mescroll.endByPage(
								res.data.list.data.length,
								res.data.list.last_page
							)
						}
					}
				})
			},

			getLog({
				num,
				size
			}) {
				this.req({
					url: 'climb_list_info',
					data: {
						goods_id: this.optData.id,
						num: this.optData.num,
						// shang_id: this.subTab.length > 0 ? this.subTab[this.subTabCur].shang_id : ''
					},
					Loading: true,
					success: res => {
						if (res.status == 1) {
							// this.subTab = res.data.category

							if (num == 1) this.logList = []

							this.logList = this.logList.concat(res.data.data.list)
							this.mescroll.endByPage(res.data.data.list.length, res.data.last_page)
						}
					}
				})
			},

			getData() {
				this.req({
					url: 'climb_detail',
					data: {
						goods_id: this.optData.id,
						num: this.optData.num,
					},
					success: res => {
						if (res.status == 1) {
							this.pageData = res.data
						}
					}
				})
			},

			close(e) {
				this.$refs[e].close()
			},

			open(e) {
				this.$refs[e].open()

				if (e == 'bossPop') {
					this.$nextTick(() => {
						setTimeout(() => {
							this.bossTabChange(this.bossTabCur)
						}, 200)
					})
				}

				if (e == 'playPop') {
					this.$c.getRule(14).then(res => {
						if (res.status == 1) {
							this.playRuleData = res.data
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 0 300rpx;

		/deep/.uni-navbar__placeholder {
			display: none;
		}

		// .boss-card {
		//   margin: 0 auto -20rpx;
		//   width: 690rpx;
		//   height: 260rpx;
		//   box-sizing: border-box;
		//   display: flex;
		//   justify-content: space-between;
		//   padding: 50rpx 50rpx 0 40rpx;

		//   .boss-l {
		//     flex: 1;
		//     padding-top: 10rpx;

		//     .user {
		//       display: flex;
		//       align-items: center;

		//       .avatar {
		//         width: 100rpx;
		//         height: 100rpx;
		//         background: #9d9d9d;
		//         border: 1px solid #cccccc;
		//         border-radius: 50%;
		//       }

		//       .info {
		//         width: 250rpx;
		//         margin-left: 20rpx;

		//         .name {
		//           font-size: 32rpx;
		//           font-family: Source Han Sans CN;
		//           font-weight: 400;
		//           color: #ffffff;
		//         }
		//         .hang1 {
		//         }

		//         .btn-text {
		//           margin-top: 6rpx;
		//           white-space: nowrap;

		//           font-size: 36rpx;
		//           font-family: YouSheBiaoTiHei;
		//           font-weight: 400;
		//           color: #d0d1ff;
		//         }
		//       }
		//     }

		//     .btn-list {
		//       display: flex;
		//       justify-content: flex-end;
		//       margin-top: 20rpx;

		//       .btn {
		//         width: 110rpx;
		//         height: 40rpx;
		//         margin-left: 30rpx;

		//         &.large {
		//           width: 150rpx;
		//         }
		//       }
		//       .btn {
		//       }
		//       .large {
		//       }
		//     }
		//   }

		//   .boss-r {
		//     display: flex;
		//     flex-flow: column nowrap;
		//     align-items: center;
		//     padding-left: 50rpx;

		//     .pic {
		//       width: 130rpx;
		//       height: 130rpx;
		//       border: 1px solid;
		//       border-image: linear-gradient(90deg, #6adeff, #7ab5ff, #ff7feb) 1 1;
		//       box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(176, 128, 255, 0.8);
		//     }

		//     .ling {
		//       width: 142rpx;
		//       height: 50rpx;
		//     }
		//   }
		// }
		.common_bg {}

		image {
			width: 100%;
			height: 100%;
			border-radius: inherit;
		}

		.hd-banner {
			width: 100%;
			height: 750rpx;
			position: relative;

			.boss-card {
				width: 168rpx;
				height: 260rpx;
				display: flex;
				flex-flow: column nowrap;
				align-items: center;
				position: absolute;
				left: 30rpx;
				text-shadow: 0 0 10rpx #000;

				.boss-ava {
					width: 76rpx;
					height: 76rpx;
					border: 2rpx solid #e40d1d;
					border-radius: 50%;
				}

				.boss-name {
					width: 100%;
					padding: 0 20rpx;
					box-sizing: border-box;
					text-align: center;
					white-space: nowrap;

					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 22rpx;
					color: #ffffff;
				}

				.boss-fa {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #ffffff;
					white-space: nowrap;
				}

				.boss-th {
					padding: 30rpx 0 0;
					white-space: nowrap;

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #ffffff;
				}
			}
		}

		.banner-up {
			position: relative;
			z-index: 1;
			margin: -194rpx 0 0;
			width: 100%;
			height: 280rpx;

			&.noRe {
				margin: -94rpx 0 0;
				height: 140rpx;
			}

			.box-title {
				width: 310rpx;
				height: 108rpx;
				box-sizing: border-box;
				padding: 26rpx 20rpx 0;
				position: absolute;
				left: 50%;
				top: 0;
				transform: translate(-50%, -46rpx);

				/deep/.uni-noticebar__content-text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}
			}

			.rule-price {
				padding: 18rpx 18rpx 0;
				display: flex;
				justify-content: space-between;

				.rule {
					width: 202rpx;
					height: 84rpx;
				}

				.price {
					width: 202rpx;
					height: 84rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					padding: 10rpx 0 0 10rpx;

					font-family: 光良酒-干杯体, 光良酒-干杯体;
					font-weight: 400;
					font-size: 24rpx;
					color: #ffffff;
					text-shadow: 0 0 4px #000, 0 0 4px #000, 0 0 4px #000, 0 0 4px #000;
				}

				.c_bg {}
			}

			.rd-box {
				width: 690rpx;
				height: 134rpx;
				margin: 14rpx auto 0;
				box-sizing: border-box;
				background: #0e0e0e;
				padding: 0 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.rd-l {
					width: 70rpx;
					height: 40rpx;
				}

				.rd-c {
					width: 1rpx;
					height: 54rpx;
					background: #555555;
				}

				.rd-r {
					width: 516rpx;

					.nu-rate {
						text-align: center;

						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #ffffff;
					}

					.nu-pro {
						line-height: 0;
						padding: 10rpx 0;

						/deep/.cmd-progress-inner {
							background: #ffffff;
						}
					}

					.nu-tip {
						text-align: center;

						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #ffffff;
					}
				}
			}
		}

		.tab {
			display: flex;
			padding: 10rpx 60rpx 0;
			justify-content: space-evenly;
			align-items: center;

			.tab-item {
				width: 220rpx;
				height: 76rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				filter: grayscale(1);

				font-family: 光良酒-干杯体, 光良酒-干杯体;
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
				text-shadow: 0 0 3px #000000, 0 0 3px #000000, 0 0 3px #000000,
					0 0 3px #000000;

				&.act {
					filter: grayscale(0);
				}
			}

			.common_bg {}
		}

		.list {
			padding: 1rpx 0 0;

			.list-item {
				padding: 30rpx 0;
				box-sizing: border-box;

				.list-title {
					margin: 0 auto;
					width: 690rpx;
					height: 54rpx;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					padding-left: 30rpx;
					background-size: 570rpx 100%;

					font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
					font-weight: 400;
					font-size: 28rpx;
					color: #ffffff;
					text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);

					text {
						padding-left: 10rpx;

						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #ffffff;
					}
				}

				.common_bg {}

				.goods-list {
					display: inline-flex;
					padding: 20rpx 30rpx 0;

					.goods-item {
						width: 210rpx;
						margin-left: 30rpx;

						&:first-child {
							margin-left: 0;
						}

						.hang1 {}

						.pic {
							width: 100%;
							height: 210rpx;
							box-sizing: border-box;
							padding: 6rpx;
							position: relative;

							.yu-tag {
								width: 66rpx;
								height: 32rpx;
								border: 1px solid #00ed82;
								position: absolute;
								left: 0;
								bottom: 0;
								z-index: 1;
								display: flex;
								justify-content: center;
								align-items: center;
								background: #000;

								font-size: 20rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #1efb98;
							}
						}

						.title {
							margin-top: 10rpx;
							text-align: center;

							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #ffffff;
						}

						.price {
							text-align: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #ffffff;
						}
					}
				}
			}

			.common_bg {}
		}

		.sub-tab {
			white-space: nowrap;
			padding: 30rpx 0 10rpx;

			.sub-tab-item {
				display: inline-flex;
				align-items: center;
				margin-left: 40rpx;
				position: relative;
				padding: 0 0 10rpx;

				font-family: 光良酒-干杯体, 光良酒-干杯体;
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
				text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);

				&.act {
					color: #e40d1d;

					&::after {
						content: '';
						display: block;
						width: 36rpx;
						height: 4rpx;
						background: #e40d1d;
						border-radius: 304rpx 304rpx 304rpx 304rpx;
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
					}
				}

				&:last-child {
					margin-right: 40rpx;
				}
			}

			.common_bg {}
		}

		.fixed-btns {
			.btn {}
		}

		.log-list {
			padding: 1rpx 30rpx 30rpx;

			.log-item {
				height: 120rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				background: #252525;
				border: 2rpx solid #444444;
				position: relative;

				.log-num {
					position: absolute;
					right: 0;
					top: 0;
					z-index: 1;
					padding: 0 16rpx;
					height: 32rpx;
					background: #e4690d;
					display: flex;
					align-items: center;

					font-family: 光良酒-干杯体, 光良酒-干杯体;
					font-weight: 400;
					font-size: 20rpx;
					color: #ffffff;
				}

				.avatar {
					width: 80rpx;
					height: 80rpx;
					background: #9d9d9d;
					border: 1px solid #cccccc;
					border-radius: 50%;
					overflow: hidden;
				}

				.info {
					width: 230rpx;
					margin-left: 20rpx;

					.name {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #ffffff;
					}

					.hang1 {}

					.time {
						margin-top: 10rpx;
						white-space: nowrap;

						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #dddddd;
					}
				}

				.prize {
					flex: 1;
					padding-left: 40rpx;
					display: flex;
					align-items: center;

					.pic {
						width: 60rpx;
						height: 60rpx;
					}

					.title {
						width: 150rpx;
						margin-left: 20rpx;

						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #ffffff;
					}

					.hang1 {}

					.num {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #ffffff;
					}
				}
			}
		}

		/* **************************************** */
		/* **************************************** */
		/* **************************************** */

		.fixed-btns {
			position: fixed;
			z-index: 10;
			right: 20rpx;
			bottom: 300rpx;

			.btn {
				width: 94rpx;
				height: 110rpx;
				margin-top: 40rpx;
			}
		}

		.bt-fixed {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 10;
			padding: 1rpx 0 30rpx;
			box-sizing: border-box;
			width: 100%;
			background: linear-gradient(0deg, #000000 0%, rgba(43, 45, 140, 0) 100%);
			display: flex;
			flex-flow: row wrap;
			justify-content: space-around;

			.bt-btn {
				margin: 30rpx 0 0;
				width: 512rpx;
				height: 80rpx;
				position: relative;

				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;
			}

			.common_bg {}
		}

		.res-pop {
			width: 100%;
			height: 758rpx;
			position: relative;
			transform: translateY(-100rpx);

			.res-pop-hd {
				width: 360rpx;
				height: 72rpx;
				margin: 0 auto;
			}

			.res-pop-bd {
				margin: 70rpx 0 0;
				height: 620rpx;

				.res-list {
					padding: 0 30rpx 30rpx;
					display: grid;
					grid-template-columns: repeat(3, 220rpx);
					gap: 30rpx 16rpx;

					.res-item {
						width: 100%;
						border: 1px solid;
						box-sizing: border-box;

						.type-num {
							padding: 16rpx 12rpx 0;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.type-tag {
								font-family: 光良酒-干杯体, 光良酒-干杯体;
								font-weight: 400;
								font-size: 24rpx;
								color: #ffffff;
							}

							.num {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 20rpx;
								color: #ffffff;
							}
						}

						.pic {
							margin: 10rpx auto 0;
							width: 196rpx;
							height: 196rpx;
							position: relative;
							box-sizing: border-box;
							padding: 6rpx;

							.check {
								position: absolute;
								right: 10rpx;
								top: 10rpx;
								z-index: 1;
								width: 32rpx;
								height: 32rpx;
								border-radius: 50%;
								box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.5);
							}
						}

						.title {
							padding: 10rpx 10rpx 0;

							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #ffffff;
						}

						.exchange {
							padding: 10rpx 10rpx;
							text-align: center;

							font-size: 22rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #ddd;
						}
					}
				}
			}

			.res-pop-ft {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;

				transform: translateY(100%);
				padding-top: 40rpx;

				.btn-list {
					display: flex;
					justify-content: space-evenly;

					.ft-btn {
						width: 196rpx;
						height: 78rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #ffffff;

						// &.confirm {
						//   text {
						//     color: transparent;

						//     background: linear-gradient(
						//       90deg,
						//       #6adeff 0%,
						//       #7ab5ff 50%,
						//       #ff7feb 100%
						//     );
						//     background-clip: text;
						//   }
						// }
					}

					.confirm {}

					.common_bg {}

					.ft-btn {}
				}

				.r-draw {
					margin: 50rpx auto 0;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 238rpx;
					height: 78rpx;

					font-family: 光良酒-干杯体, 光良酒-干杯体;
					font-weight: 400;
					font-size: 24rpx;
					color: #ffffff;
					text-shadow: 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000,
						0 0 2px #000000;
				}

				.common_bg {}
			}
		}

		.play-pop {
			width: 680rpx;
			box-sizing: border-box;
			padding: 0 46rpx 40rpx;
			position: relative;

			.play-pop-hd {
				position: relative;
				top: -50rpx;
				margin: 0 auto;
				width: 460rpx;
				height: 120rpx;
			}

			.close {
				position: absolute;
				width: 60rpx;
				height: 60rpx;
				top: 26rpx;
				right: 36rpx;
			}

			.p-swiper {
				margin-top: 30rpx;
				width: 100%;
				height: 468rpx;

				.p-item {
					.play-pic {
						margin: 0 auto 0;
						width: 310rpx;
						height: 310rpx;
						border: 1px solid;
						border-image: linear-gradient(90deg, #2dcbff, #ff95fb) 1 1;
						position: relative;

						.play-type {
							position: absolute;
							left: 50%;
							bottom: 10rpx;
							z-index: 1;
							width: 120rpx;
							height: 40rpx;
							background: rgba(0, 0, 0, 0.6);
							border-radius: 20rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							transform: translateX(-50%);

							text {
								font-size: 32rpx;
								font-family: YouSheBiaoTiHei;
								font-weight: 400;
								color: transparent;

								background: linear-gradient(90deg,
										#85efff 0%,
										#7ab5ff 50%,
										#ff7feb 100%);
								background-clip: text;
							}
						}
					}

					.play-ling {
						width: 180rpx;
						height: 60rpx;
						margin: 10rpx auto 0;
					}

					.play-name {
						width: 310rpx;
						margin: 10rpx auto 0;
						text-align: center;

						font-size: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #dddddd;
					}
				}
			}

			.hang1 {}

			.line {
				margin: 0 auto 0;

				width: 560rpx;
				height: 1px;
				background: #444444;
			}

			.rule-title {
				margin-top: 20rpx;
				margin-left: 10rpx;

				width: 200rpx;
				height: 50rpx;
			}

			.rule-text {
				width: 560rpx;
				height: 200rpx;
				margin: 20rpx auto 0;

				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;
			}
		}

		.d-pop {
			position: relative;
			width: 594rpx;
			height: 752rpx;
			padding: 40rpx;
			box-sizing: border-box;

			.pic {
				width: 100%;
				height: 514rpx;
			}

			.title {
				padding: 20rpx 0 0;
				width: 100%;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				.hang1 {}

				text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #ffffff;
				}
			}

			.common_bg {}

			.d-list {
				.d-item {
					padding: 10rpx 0 0;

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #ffffff;
				}
			}

			.close {
				width: 196rpx;
				height: 78rpx;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translate(-50%, 160%);
			}

			.icon {}
		}

		.buy-pop {
			padding: 0 30rpx 30rpx;
			box-sizing: border-box;
			background-size: 100% auto;

			.buy-pop-hd {
				padding: 20rpx 0 0;
				padding-left: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				font-family: 光良酒-干杯体, 光良酒-干杯体;
				font-weight: 400;
				font-size: 36rpx;
				color: #ffffff;
				text-shadow: 0 0 2px #e40d1d, 0 0 2px #e40d1d, 0 0 2px #e40d1d,
					0 0 2px #e40d1d;

				.close {
					width: 48rpx;
					height: 48rpx;
				}

				.icon {}
			}

			.hd-line {
				width: 690rpx;
				height: 2rpx;
				background: #ffffff;
				margin: 20rpx auto;
			}

			.buy-card {
				background: #cccccc;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				padding: 30rpx 30rpx 10rpx;

				.buy-info {
					display: flex;

					.pic {
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
					}

					.info-r {
						width: calc(100% - 160rpx);
						box-sizing: border-box;
						display: flex;
						flex-flow: column nowrap;
						justify-content: space-between;
						padding: 10rpx 0 10rpx 30rpx;

						.title {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
						}

						.hang1 {}

						.type {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #333333;
						}

						.price-num {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.price {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 30rpx;
								color: #e40d1d;
							}

							.num {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #333333;
							}
						}

						.price-num {
							.price {}

							.num {}
						}

						.price {}

						.num {}
					}
				}

				.line {
					height: 1px;
					background: #d8d8d8;
					margin: 30rpx 0 10rpx;
				}

				.card-row {
					padding: 16rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #333333;
					}

					.row-r {
						display: flex;
						align-items: center;

						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;

						text {
							font-size: 20rpx;
							color: #888;
							margin-right: 30rpx;
						}

						.icon {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}

				.card-row {
					.title {}

					.row-r {
						.icon {}
					}
				}
			}

			.pay-card {
				margin: 30rpx 0 0;
				padding: 30rpx 30rpx 0;
				background: #cccccc;

				.pay-title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}

				.pay-type {
					padding: 20rpx 0;
					border-radius: 20rpx;
					display: flex;
					align-items: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
					}

					.title {
						flex: 1;
						padding: 0 20rpx;

						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #333333;
					}
				}
			}

			.agree {
				display: flex;
				margin-top: 30rpx;

				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;
				line-height: 40rpx;

				.icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}

				text {
					color: #e40d1d;
				}
			}

			.rule {
				padding: 20rpx;
				background: #cccccc;
				border-radius: 20rpx;
				box-sizing: border-box;
				margin: 20rpx 0 0;

				.rule-inner {
					max-height: 120rpx;

					font-size: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
			}

			.pay-btn {
				margin-top: 30rpx;
				height: 92rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				font-family: 光良酒-干杯体, 光良酒-干杯体;
				font-weight: 400;
				font-size: 32rpx;
				color: #ffffff;
				text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
			}
		}

		.ani-pop {
			width: 100vw;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 88;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #000;

			image {
				width: 100%;
				height: 1624rpx;
			}
		}

		.boss-pop {
			background-size: 100% auto;

			.boss-pop-hd {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 30rpx 0;

				font-family: 光良酒-干杯体, 光良酒-干杯体;
				font-weight: 400;
				font-size: 36rpx;
				color: #ffffff;
				text-shadow: 0 0 2px #e40d1d, 0 0 2px #e40d1d, 0 0 2px #e40d1d,
					0 0 2px #e40d1d;

				.close {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.boss-tip {
				padding: 20rpx 30rpx 0;
				display: flex;
				align-items: center;

				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #ffffff;

				.info {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.line {
				margin: 30rpx auto 0;
				width: 690rpx;
				height: 2rpx;
				background: #ffffff;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
			}

			.boss-user {
				display: flex;
				flex-flow: column nowrap;
				align-items: center;
				padding: 30rpx 0 0;

				.avatar {
					width: 170rpx;
					height: 170rpx;
					border: 2rpx solid #e40d1d;
					border-radius: 50%;
				}

				.name {
					width: 300rpx;
					text-align: center;
					padding: 20rpx 0 0;

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #ffffff;
				}

				.fa {
					display: flex;
					align-items: center;
					padding: 4rpx 0 0;

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #ffffff;
				}
			}

			.tiao-box {
				width: 690rpx;
				margin: 20rpx auto 0;
				padding: 30rpx;
				box-sizing: border-box;
				display: flex;
				flex-flow: column nowrap;
				align-items: center;
				background: #cccccc;

				.tiao-title {
					font-family: 光良酒-干杯体, 光良酒-干杯体;
					font-weight: 400;
					font-size: 32rpx;
					color: #e40d1d;
				}

				.tiao-money {
					padding: 30rpx 0 0;

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;

					text {
						color: #e40d88;
					}
				}
			}

			.boss-tab {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 30rpx 0 20rpx;

				.boss-tab-item {
					width: 30%;
					text-align: center;

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #ffffff;

					&.act {
						color: #e40d1d;
					}
				}
			}

			.boss-list {
				padding: 0 20rpx;
				display: flex;
				flex-flow: row wrap;

				.user-item {
					width: 33.33%;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					padding: 14rpx 10rpx;

					.avatar {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}

					.name {
						width: calc(100% - 60rpx);
						box-sizing: border-box;
						padding-left: 6rpx;

						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #ffffff;
					}
				}

				.boss-log {
					padding: 14rpx 10rpx;
					width: 100%;
					box-sizing: border-box;
					display: flex;
					align-items: center;

					.avatar {
						width: 88rpx;
						height: 88rpx;
						border-radius: 50%;
					}

					.name {
						width: 200rpx;
						margin-left: 14rpx;

						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #ffffff;
					}

					.boss-time {
						flex: 1;
						text-align: right;

						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #ffffff;

						text {
							color: #6d32e4;
						}
					}
				}
			}
		}
	}

	.mask_tip {
		width: 590rpx;
		height: 350rpx;
		padding-top: 40rpx;

		.header {
			font-family: 光良酒-干杯体, 光良酒-干杯体;
			font-size: 32rpx;
			color: #FFFFFF;
			text-shadow: 2px 2px 0 #000000, -2px -2px 0 #000000, 2px -2px 0 #000000, -2px 2px 0 #000000;
		}

		.title,
		.content {
			font-size: 28rpx;
			color: #FFFFFF;

			text {
				color: #F6D248;
			}
		}
	}
</style>